import React, { Component } from 'react'
import { Grid, NoticeBar, Toast } from 'antd-mobile'
import { Image, Icon, Item, NavBar } from 'components'
import { TabBarView } from '../../viewComponent'
import { post } from '../../utils'

export default class PersonalCenter extends Component<any, any> {

    public state = {
        divider: false,
        cardOperation: [
            {
                icon: require('../../assets/personalCenter_collect.png'),
                text: '收藏',
            },
            {
                icon: require('../../assets/personalCenter_follow.png'),
                text: '关注',
            },
            {
                icon: require('../../assets/personalCenter_foot.png'),
                text: '足迹',
            },
            {
                icon: require('../../assets/personalCenter_message.png'),
                text: '消息',
            }
        ],
        utilsOperation: [
            {
                icon: require('../../assets/personalCenter_utils.png'),
                text: '我的余额',
            },
            {
                icon: require('../../assets/personalCenter_utils1.png'),
                text: '我的恒豆',

            },
            {
                icon: require('../../assets/personalCenter_utils2.png'),
                text: '地址管理',

            },
            {
                icon: require('../../assets/personalCenter_utils5.png'),
                text: '客服中心',

            }
        ],
    }

    public render(): JSX.Element {
        const { cardOperation, utilsOperation, divider } = this.state
        const { userInfo, SET_USER_ORDER_INDEX } = this.props
        const orderOperation = [
            {
                icon: require('../../assets/personalCenter_orderOperat.png'),
                text: '待付款',
                messageNum: userInfo.order_number && userInfo.order_number.nopay
            },
            {
                icon: require('../../assets/personalCenter_orderOperat1.png'),
                text: '待发货',
                messageNum: userInfo.order_number && userInfo.order_number.nosend

            },
            {
                icon: require('../../assets/personalCenter_orderOperat2.png'),
                text: '待收货',
                messageNum: userInfo.order_number && userInfo.order_number.nohar

            },
            {
                icon: require('../../assets/personalCenter_orderOperat3.png'),
                text: '退换货',
                messageNum: userInfo.order_number && userInfo.order_number.refund

            }
        ]
        return (
            <div className="personCenter">
                <NavBar
                    className="no_bg"
                    left={divider ? '' : ' '}
                    title={divider ? '我的' : ''}
                    right={<Icon type="system" onClick={() => { this.goToUrl('/My/account') }} className="personCenter_topOpearte_setting" />}
                    fixed={true}
                    divider={divider}
                    bgAnimate={true}
                    moveBgColor="255,255,255"
                    distance={100}
                    animateMove={() => { this.setState({ divider: false }) }}
                    animateEnd={() => { this.setState({ divider: true }) }}
                />
                <div className="personCenter_topImg">
                    {/* <div className="personCenter_topOpearte">
                        <div>
                            <span>
                                <Icon type="system" className="personCenter_topOpearte_setting" />
                            </span>
                        </div>
                    </div> */}
                    <img src={require('../../assets/personCenter_topImg.png')} />
                </div>
                <section className="personCenter_container">
                    <div className="personCenter_infoCardWrap_card">
                        <div className="personCenter_infoCardWrap_card_loginInfoWrap">
                            <Image src={userInfo.ico || require('../../assets/personCenter_defaultImg.png')} />
                            <div className="personCenter_infoCardWrap_card_loginInfo">
                                <div>{userInfo.nick_name || userInfo.user_name}</div>
                                <div className="personCenter_infoCardWrap_card_identity">
                                    {
                                        userInfo.role_type && userInfo.role_type.map((item: any, index: number) => {
                                            return this.getTypeNode(item, index)
                                        })
                                    }

                                </div>
                            </div>
                        </div>
                        <div className="personCenter_infoCardWrap_card_operation">
                            <Grid
                                onClick={this.handleCardOperation}
                                itemStyle={{ height: '3.8rem' }}
                                data={cardOperation}
                                hasLine={false}
                                renderItem={(dataItem: any) => (
                                    <div>
                                        <img src={dataItem.icon} style={{ height: '1.9rem' }} />
                                        <div style={{ paddingTop: '0.4rem' }}>
                                            <span>{dataItem.text}</span>
                                        </div>
                                    </div>
                                )}
                            />
                        </div>
                    </div>
                </section>
                <section className="personCenter_category">
                    {
                        (userInfo.real_name && userInfo.id_card)
                            ? ''
                            : <div className="personCenter_authenticationInfo">
                                <NoticeBar mode="closable" icon={<Icon type="protect" />}>
                                    <span onClick={() => { this.goToUrl('/My/signature') }}>您还未进行实名认证，点击进行认证</span>
                            </NoticeBar>
                            </div>
                    }
                    <div className="personCenter_category_order">
                        <Item
                            title={<span className="personCenter_category_order_fontClass">我的订单</span>}
                            value={<span style={{ color: '#b1b1b1', fontSize: '0.66rem' }}>全部订单</span>}
                            link={true}
                            onPress={() => { SET_USER_ORDER_INDEX(0); this.goToUrl('/My/myOrder') }}
                        />
                    </div>
                    <div className="personCenter_category_order_operation">
                        <Grid
                            onClick={this.handleOrderOperation}
                            columnNum={4}
                            itemStyle={{ height: '3.8rem' }}
                            data={orderOperation}
                            hasLine={false}
                            renderItem={(dataItem: any) => (
                                <div>
                                    <div className="personCenter_category_order_operationInfo">
                                        <img src={dataItem.icon} style={{ height: '1.1rem' }} />
                                        {
                                            (dataItem.messageNum)
                                                ? <span>{dataItem.messageNum}</span>
                                                : ''
                                        }
                                    </div>
                                    <div style={{ paddingTop: '0.4rem' }}>
                                        <span className="personCenter_category_order_fontClass">{dataItem.text}
                                        </span>
                                    </div>
                                </div>
                            )}
                        />
                    </div>
                    <div className="personCenter_category_order">
                        <Item title={<span className="personCenter_category_order_fontClass">必备工具</span>} value="" />
                    </div>
                    <div className="personCenter_category_order_operation">
                        <Grid
                            onClick={this.handleUtilsOperation}
                            columnNum={4}
                            itemStyle={{ height: '3.8rem' }}
                            data={utilsOperation}
                            hasLine={false}
                            renderItem={(dataItem: any) => (
                                <div>
                                    <div className="personCenter_category_order_operationInfo">
                                        {
                                            (dataItem.messageNum)
                                                ? <span>{dataItem.messageNum}</span>
                                                : ''
                                        }
                                        <img src={dataItem.icon} style={{ height: '1.1rem' }} />
                                    </div>
                                    <div style={{ paddingTop: '0.4rem' }}>
                                        <span className="personCenter_category_order_fontClass">{dataItem.text}</span>
                                    </div>
                                </div>
                            )}
                        />
                    </div>
                </section>
                <TabBarView select="my" />
            </div>
        )
    }

    public componentDidMount() {
        this.getData()
        this.handleMyUtilsMenu()
    }

    private async getData() {
        const { userInfo, SET_USER_ORDER_NUMBER } = this.props
        try {
            const data = await post('orderapi/orderStatusNum', {
                userId: userInfo.id
            })
            SET_USER_ORDER_NUMBER(data)
        } catch (data) {
            if (data) {
                Toast.info(data.msg, 2)
            } else {
                Toast.info('网络堵塞, 请稍后再试', 2)
            }
        }
    }

    private handleMyUtilsMenu = () => {
        const { userInfo } = this.props
        const obj = JSON.parse(JSON.stringify(this.state.utilsOperation))
        userInfo.role_type.map((item: any, index: number) => {
            if (item.name === '债权人') {
                obj.splice(obj.length - 1, 0, {
                    icon: require('../../assets/personalCenter_utils3.png'),
                    text: '债权管理'
                })
            }
            if (item.name === '债务人') {
                obj.splice(obj.length - 1, 0, {
                    icon: require('../../assets/personalCenter_utils4.png'),
                    text: '债务管理'
                })
            }
        })
        this.setState({
            utilsOperation: obj
        })
    }

    private handleCardOperation = (el: any, index: number) => {
        switch (el.text) {
            case '收藏':
                this.goToUrl('/My/collection')
                break
            case '关注':
                this.goToUrl('/My/follow')
                break
            case '足迹':
                this.goToUrl('/My/footprint')
                break
            case '消息':
                this.goToUrl('/My/message')
                break
            default: return
        }
    }

    private handleOrderOperation = (el: any, index: number) => {
        const { SET_USER_ORDER_INDEX } = this.props
        switch (el.text) {
            case '待付款':
                SET_USER_ORDER_INDEX(1)
                this.goToUrl('/My/myOrder/')
                return
            case '待发货':
                SET_USER_ORDER_INDEX(2)
                this.goToUrl('/My/myOrder/')
                return
            case '待收货':
                SET_USER_ORDER_INDEX(3)
                this.goToUrl('/My/myOrder/')
                return
            case '退换货':
                this.goToUrl('/My/returnpolicy/')
                return
            default: return
        }
    }

    private handleUtilsOperation = (el: any, index: number) => {
        switch (el.text) {
            case '我的余额':
                this.goToUrl('/My/myBalance')
                break
            case '我的恒豆':
                this.goToUrl('/My/myBeans')
                break
            case '地址管理':
                this.goToUrl('/My/address/1')
                break
            case '债权管理':
                this.goToUrl('/My/hypothecation')
                break
            case '债务管理':
                this.goToUrl('/My/debtManagement')
                break
            case '客服中心':
                this.goToUrl('/My/message')
                break
            default: return
        }
    }

    private getTypeNode(data: any, index: number) {
        if (data.value === '1') {
            return (
                <div className="personCenter_infoCardWrap_card_identity_member" key={index}>
                    <span>M</span>
                    <span>
                        {data.name}
                    </span>
                </div>
            )
        }
        if (data.value === '2') {
            return (
                <div className="personCenter_infoCardWrap_card_identity_obligor" key={index}>
                    <span>D</span>
                    <span>
                        {data.name}
                    </span>
                </div>
            )
        }
        if (data.value === '3') {
            return (
                <div className="personCenter_infoCardWrap_card_identity_creditor" key={index}>
                    <span>C</span>
                    <span>
                        {data.name}
                    </span>
                </div>
            )
        }
        return
    }

    private goToUrl = (url: string = this.props.location.pathname) => {
        this.props.history.push({
            pathname: url
        })
    }
}